<template>
  <el-checkbox v-model="checked_" :size="size" class="op-btn" />
  <DialogButton v-if="checked" :label="label">
    <slot></slot>
  </DialogButton>
</template>

<script lang="ts" setup>
  import DialogButton from './DialogButton.vue';
  import { computed, defineEmits } from 'vue';

  const props = defineProps<{
    checked?: boolean;
    size?: string;
    label: string;
  }>();

  const emit = defineEmits<{
    (e: 'update:checked', checked: boolean): void;
  }>();

  const checked_ = computed({
    get: (): boolean => !!props.checked,
    set: (v: boolean) => emit('update:checked', v)
  });
</script>

<script lang="ts">
  // 声明额外的选项
  // noinspection JSUnusedGlobalSymbols
  export default {
    inheritAttrs: false
  };
</script>

<style scoped>
  .op-btn {
    margin-right: 10px;
  }
</style>
